<template>
	<view>
		<view class="orderPage">
			<u-subsection bgColor="#f6f6f6" :list="list0" :current="listType" mode="button" @change="changeListType"
				class="top">
			</u-subsection>
			<u-subsection bgColor="#f6f6f6" v-if="listType==0" :list="list1" :current="orderStatus" mode="button"
				@change="changePage" class="top">
			</u-subsection>
			<u-subsection bgColor="#f6f6f6" v-if="listType==1" :list="list2" :current="orderStatus" mode="button"
				@change="changePage" class="top">
			</u-subsection>
			<!-- 认养订单 -->
			<AdoptionOrder v-if="listType==0" :orderStatus="orderStatus" ref="AdoptionOrder"></AdoptionOrder>
			<DispathOrder v-if="listType==1" :orderStatus="orderStatus" ref="DispatchOrder"></DispathOrder>
		</view>
	</view>
</template>

<script>
	import AdoptionOrder from '@/components/Order/AdoptionOrder.vue'
	import DispathOrder from '@/components/Order/DispatchOrder.vue'
	export default {
		components: {
			AdoptionOrder,
			DispathOrder
		},
		data() {
			return {
				listType: 0,
				orderStatus: 0,
				list0: ['认养订单', '发货订单'],
				list1: ['待付款', '待处理', '已完成'],
				list2: ['待付款', '待发货', '待收货', '已完成']
			}
		},
		methods: {
			changeListType(index) {
				this.listType = index;
			},
			changePage(index) {
				this.orderStatus = index;
				if(this.listType == 0){
					this.$refs.AdoptionOrder.changeOrderStatus(index);
				}else{
					this.$refs.DispatchOrder.changeOrderStatus(index);
				}
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/iconfont/iconfont.css';
	
	page{
		background-color: #f6f6f6;
	}
	
	.orderPage {
		padding: 5px;
	}

	.top {
		margin-bottom: 5px;
		background-color: #f6f6f6;
	}

	.wrap {
		padding: 12px;
	}

	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}

	.bg-purple {
		background: #f6f6f6;
	}

	.bg-purple-light {
		background: #f6f6f6;
	}

	.bg-purple-dark {
		background: #f6f6f6;
	}
</style>
